<template>
    <a-modal :title="$t('Create')+$t('User')" v-model="adduser" @cancel='cancelhandle' @ok="adduserok" :cancelText="$t('Cancel')" :okText="$t('Sure')" v-dragModal>	
        <a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
	      	<a-form :form='form'>
                <!-- <a-form-item label='IP' v-bind='formlayout' has-feedback>
	                <a-select @change="handleChange" 
	                	v-decorator="['addr',{
		                    rules:[{required:true,message: $t('Choose')+'ip'}]
		                }]"
	                	:placeholder="$t('Choose')+'ip'">
					      	<a-select-option :value="i" v-for="i in basedata" :key="i">{{i}}</a-select-option>
					</a-select>
	            </a-form-item> -->
				<a-form-item :label="$t('User')+$t('Name')" v-bind="lang=='zh'?formlayout:formlayout2">
					<a-input 
						v-decorator="['user',{
							rules:[{required:true,message:$t('Choose') + $t('User')+$t('Name')},
							{pattern:/^[a-zA-Z][a-zA-Z0-9_-]{2,31}$/,message: $t('Not_enter_special_characters6')}]
						}]"
					:placeholder="$t('Enter')+$t('User')+$t('Name')"/>
				</a-form-item>
				<a-form-item :label="$t('Password')" v-bind="lang=='zh'?formlayout:formlayout2">
					<a-input-password 
						v-decorator="['pwd',{
							rules:[
                                {required:true,message: $t('Enter')+$t('Password')},
								{validator: validateToNextPassword},
								{pattern:/^[^\s\u4e00-\u9fa5]{6,20}$/,message: $t('Password_rule_prompt')}
							]
						}]"
					:placeholder="$t('Enter')+$t('Password')"/>
				</a-form-item>
				<a-form-item :label="$t('Sure')+$t('Password')" v-bind="lang=='zh'?formlayout:formlayout2">
					<a-input-password 
						v-decorator="['cpwd',{
							rules:[
                                {required:true,message: $t('Confirm_pwd_again')},
								{validator: compareToFirstPassword},
								{pattern:/^[^\s\u4e00-\u9fa5]{6,20}$/,message: $t('Password_rule_prompt')}
                            ]
						}]" @blur="handleConfirmBlur"
					:placeholder="$t('Confirm_pwd_again')"/>
				</a-form-item>
				<!-- <a-form-item :label="$t('File-quota')" v-bind="formlayout">
					<a-input-number
						v-decorator="['files',{
							rules:[{required:true,message:'请输入文件数配额'}]
						}] " :min='0'
					placeholder="例如：100"/>
				</a-form-item>
				<a-form-item :label="$t('Capacity-quota')" v-bind='formlayout'>
                    <a-row>
                        <a-col :span='12'>
                            <a-input-number v-decorator="['size',{
                                rules:[{required:true,message:'请输入容量配额'}]
                            }]" :min='0' placeholder='例如：10'>
                            </a-input-number>
                        </a-col>
                        <a-col :span='12'>
                            <a-select v-decorator="['unit',{
                                rules:[{required:true,message:'请输入单位'}],initialValue:'KiB'
                            }]">
                                <a-select-option v-for='u in unit ' :key='u.val'>{{u.label}}</a-select-option>
                            </a-select>
                        </a-col>
                    </a-row>
                </a-form-item> -->
	      	</a-form>
	    </a-modal>
</template>
<script>

import request from '@/request/request'

export default {
    name:'cuser',
    props:['cu'],
    data(){
        return{
            form:this.$form.createForm(this),
            adduser:false,
            formlayout:{
                labelCol:{span:6},
                wrapperCol:{span:18}
            },
			formlayout2:{
                labelCol:{span:7},
                wrapperCol:{span:17}
            },
         	unit:[{val:'KiB',label:'KiB'},{val:'MiB',label:'MiB'},{val:'GiB',label:'GiB'},{val:'TiB',label:'TiB'}],
			addbtn:0,
			basedata:[],
			spinning:false,
			lang: this.$store.state.language
        }
    },
    watch:{
        cu(val){
            this.adduser=val
        },
		'$store.state.language'(newValue) {
			this.lang = newValue;
		}
	},
	mounted(){
		// this.getbaseip()
	},
    methods:{
        getbaseip(){
          request('get', 'cephfs/user/_info').then(res=>{
						if(res.data.flag == 1) {
							this.model(res.data.id) //返回模板
							this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
						}else {
              this.basedata = res.data
						}
          })
        },
    	handleChange(value) {
	    },
        cancelhandle(e){
            this.form.resetFields();
            this.$emit('omodal', false, true)
			// this.adduser=false
			this.spinning = false
        },
        adduserok(e){
            e.preventDefault();
            this.form.validateFields((err,value)=>{
                if(!err){
					this.spinning = true
					request('put', 'cephfs/samba/',{
						// addr: value.addr,
                        user: value.user,
                        pwd: value.pwd,
                        // size: value.size,
                        // unit: value.unit,
                        // files: value.files
					}).then(res=>{
						this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.spinning = false
		    			// this.adduser=false
            			this.$emit('omodal', false, false)
            			this.form.resetFields();
		    		}).catch(err => {
						this.spinning = false;
            			this.$emit('omodal', false, false);
            			this.form.resetFields();
					})
                }
            })
        },
        handleConfirmBlur(e) {
			const value = e.target.value;
			this.confirmDirty = this.confirmDirty || !!value;
		},
		compareToFirstPassword(rule, value, callback) {
			const form = this.form;
			if (value && value !== form.getFieldValue('pwd')) {
				callback(this.$t('Pwd-error'));
			} else {
				callback();
			}
		},
		validateToNextPassword(rule, value, callback) {
			const form = this.form;
			if (value && this.confirmDirty) {
				form.validateFields(['confirm'], { force: true });
			}
			callback();
		},
    }
}
</script>

<style scoped>
	/* .client{
		display: flex;
		justify-content: flex-start;
	}
	.subtn{
		margin-right: 1em;
		margin-top: 0.3em;
	}
	.add{
		overflow: hidden;
		border: 3px solid #e6f4ff;
		padding-top: 1em;
	} */
</style>
